<template>
  <a-modal
    title="参与详情"
    :visible="signUpVisible"
    :footer="null"
    @cancel="close"
    :bodyStyle="{padding:0}"
    :width="1200"
  >
    <div class="modalTop">
      <a-radio-group v-if="pay==0||pay==1||pay==4" v-model="pay" @change="onChange">
        <a-radio-button :value="1">已支付</a-radio-button>
        <a-radio-button :value="0">未支付</a-radio-button>
      </a-radio-group>
      <a-button style="float:right;" @click="exportTable()">导出</a-button>
    </div>
    <div class="modalContent">
      <div class="alert">
        <a-alert type="warning" v-if="pay==1">
          <template slot="message">
            <span>
              支付金额 
              <span style="color: rgb(252, 156, 107);">{{signUpCount.unit_price}}</span>元
            </span>
            <span style="margin:0 10px;">
              已支付人数
              <span style="color: rgb(252, 156, 107);">{{signUpCount.student_number}}</span>
            </span>
            <span>
              总计金额
              <span style="color: rgb(252, 156, 107);">{{signUpCount.total_amount}}</span>元
            </span>
          </template>
        </a-alert>
        <a-alert type="info" v-else-if="pay==0" show-icon>
          <template slot="message">
            共
            <span style="color: rgb(252, 156, 107);">{{signUpCount.student_number}}</span>位学员报名后未支付，建议线下联系学员，促进学员转化。
          </template>
        </a-alert>
        <a-alert type="warning" v-else-if="pay==2" >
          <template slot="message">报名人数{{signUpCount.student_number}}</template>
        </a-alert>
      </div>
      <div class="table  t-padding-b2">
        <s-table
          ref="signUpTable"
          class="user_management_table"
          style="margin-top:10px;"
          :scroll="{ y: 300,x:signUpColumns.length>6?1500:'-' }"
          size="default"
          :columns="signUpColumns"
          :data="loadData"
          :showPagination="pay==5?false:true"
          :rowKey="(record) => record.id"
        >
          <span slot="time" slot-scope="text">{{text|formatDate}}</span>
          <span slot="sex" slot-scope="text">{{text==1?'男':text==2?'女':'未知'}}</span>
          <span slot="age" slot-scope="text">{{text+'岁'}}</span>
          <span slot="schoolName" slot-scope="text,record">{{record.school_name}}</span>
          <span slot="birthday" slot-scope="text,record">{{record.birth||'-'}}</span>
          <span slot="grade" slot-scope="text,record">
            <span v-if="record.grade&&record.grade.name">{{record.grade.name}}</span>
            <span v-else>-</span>
          </span>
          <span slot="course" slot-scope="text,record">
            <span v-if="record.course&&record.course.name">{{record.course.name}}</span>
            <span v-else>-</span>
          </span>
        </s-table>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { activitySignUpDetails, activitySignUpAlert, exportSignUp } from '@/api/activity'
import moment from 'moment'
import { STable } from '@/components'
export default {
  name: 'signUpTable',
  components: {
    STable,
  },
  data() {
    return {
      //报名数据弹窗
      signUpVisible: false,
      pay: 2,
      signUpColumns: [
        {
          title: '报名时间',
          dataIndex: 'created_at',
          scopedSlots: { customRender: 'time' },
        },
        {
          title: '学员姓名',
          dataIndex: 'student_name',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
      ],
      loadData: (parameter) => {
        return activitySignUpDetails(
          Object.assign(parameter, { pay_status: this.pay == 2 ? undefined : this.pay }),
          this.signUpID
        ).then((res) => {
          this.tableData = JSON.parse(JSON.stringify(res.data))
          return res
        })
      },
      signUpCount: {
        student_number: 0,
        unit_price: 0,
        total_amount: 0,
      },
    }
  },
  watch: {
    signUpVisible(val) {
      if (val) {
        // this.getCount()
      } else {
        this.signUpCount = {
          student_number: 0,
        }
        this.pay = 2
        this.signUpID = null
        this.signUpColumns = [
          {
            title: '报名时间',
            dataIndex: 'created_at',
            scopedSlots: { customRender: 'time' },
          },
          {
            title: '学员姓名',
            dataIndex: 'student_name',
          },
          {
            title: '手机号',
            dataIndex: 'phone',
          },
        ]
      }
    },
  },
  methods: {
    showSignUpTable(data) {
      console.log(data)
      if(data.cate=='vote'){
        this.pay = 5
        this.signUpColumns=[
        {
                  title: '排名',
                  dataIndex: 'index',
                  align: 'center',
                   customRender: (text,record,index) => `${index+1}`,
         },
         {
                  title: '编号',
                  dataIndex: 'id',
                  align: 'center',
         },
         {
                  title: '名称',
                  dataIndex: 'name',
                  align: 'center',
         },
         {
                  title: '投票数',
                  dataIndex: 'vote_number',
                  align: 'center',
         },
        //  {
        //           title: '描述',
        //           dataIndex: 'describe',
        //           align: 'center',
        //  },
        ]
        this.signUpID = data.id
        this.signUpVisible = true
        this.$nextTick(() => {
              this.$refs.signUpTable.refresh()
         })
         
      }else{
        if (data.other.sign_up && data.other.sign_up.length > 0) {
            data.other.sign_up.forEach((val) => {
              if (val == '3') {
                this.signUpColumns.push({
                  title: '性别',
                  dataIndex: 'sex',
                  align: 'center',
                  scopedSlots: { customRender: 'sex' },
                })
              } else if (val == '4') {
                this.signUpColumns.push({
                  title: '年龄',
                  dataIndex: 'age',
                  align: 'center',
                  scopedSlots: { customRender: 'age' },
                })
              } else if (val == '5') {
                this.signUpColumns.push({
                  title: '出生日期',
                  dataIndex: 'birthday',
                  scopedSlots: { customRender: 'birthday' },
                })
              } else if (val == '6') {
                this.signUpColumns.push({
                  title: '学校',
                  dataIndex: 'schoolName',
                  scopedSlots: { customRender: 'schoolName' },
                })
              } else if (val == '7') {
                this.signUpColumns.push({
                  title: '年级',
                  dataIndex: 'grade',
                  scopedSlots: { customRender: 'grade' },
                  align: 'center',
                })
              } else if (val == '8') {
                this.signUpColumns.push({
                  title: '报读课程',
                  dataIndex: 'course',
                  scopedSlots: { customRender: 'course' },
                })
              }
            })
          }
          this.signUpID = data.id

          if (data.rules && data.rules.payCheck) {
            this.pay = 1
            this.$nextTick(() => {
              this.$refs.signUpTable.refresh()
            })
            this.signUpVisible = true
          } else {
            this.pay = 2
            this.$nextTick(() => {
              this.$refs.signUpTable.refresh()
            })
            this.signUpVisible = true
          }

      }
      
    },
    moment,
    //获取统计
    getCount() {
      activitySignUpAlert({ pay_status: this.pay == 2 ? undefined : this.pay }, this.signUpID)
        .then((res) => {
          this.signUpCount = res
        })
        .catch((err) => {})
    },
    //导出
    exportTable() {
      exportSignUp(this.$store.state.user.school, this.signUpID)
        .then((res) => {
          if (res.url && res.url.url && res.url.path) {
            window.location.href = res.url.url + res.url.path
            this.$message.success('导出成功')
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
    onChange(data) {
      this.$nextTick(() => {
        this.getCount()
        this.$refs.signUpTable.refresh()
      })
    },
    close() {
      this.signUpCount = {
        student_number: 0,
      }
      this.pay = 2
      this.signUpID = null
      this.signUpVisible = false
      this.signUpColumns = [
        {
          title: '报名时间',
          dataIndex: 'created_at',
          scopedSlots: { customRender: 'time' },
        },
        {
          title: '学员姓名',
          dataIndex: 'student_name',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
      ]
    },
  },
}
</script>

<style lang="less" scoped>
.modalTop {
  width: 100%;
  height: 52px;
  // border-bottom: 1px solid #e8e8e8;
  padding: 10px 16px;
}
.modalContent {
  padding: 10px 16px;
}
</style>